﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <link rel="stylesheet" href="/css/home.css">
    <script src="/Scripts/jquery.js"></script>
    <script src="/Scripts/unslider.min.js"></script>
    <script src="/plugins/layer/layer.js"></script>
    <script src="/Scripts/com.js"></script>
    <script src="/Scripts/config.js"></script>
    <script src="../Scripts/contact.js"></script>
    <title>小程序网站</title>
    <style>
        .showipc2-img {
            height: 290px;
        }

        .showipc1-img {
            max-height: 100%;
        }

        .index_banner img {
            height: 300px;
        }

        .news-title {
            height: 25px;
            line-height: 26px;
            overflow: hidden;
        }

        .box-img-5 {
            margin-left: 5px;
            margin-bottom: 5px;
        }

        .banner {
            width: 1000px;
            position: relative;
            overflow: auto;
            text-align: center;
            margin-top: 0px;
        }

            .banner li {
                list-style: none;
            }

            .banner ul li {
                position: relative;
                float: left;
                right: 40px;
                /*min-height: 500px;*/
                cursor: pointer;
                margin-top: 0px;
            }

            .banner .dots {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
            }

                .banner .dots li {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    margin: 0 4px;
                    text-indent: -999em;
                    border: 2px solid #fff;
                    border-radius: 6px;
                    cursor: pointer;
                    opacity: .4;
                    -webkit-transition: background .5s,opacity .5s;
                    -moz-transition: background .5s,opacity .5s;
                    transition: background .5s,opacity .5s;
                }

                    .banner .dots li.active {
                        background: #fff;
                        opacity: 1;
                    }

            .banner .arrow {
                position: absolute;
                top: 145px;
            }

            .banner #al {
                left: 15px;
            }

            .banner #ar {
                right: 15px;
            }

        .showipc1-img {
            width: 980px;
        }

        .showipc2-img {
            width: 100%;
        }

        .box-pic-a, .box-pic-b {
            width: 1000px;
            margin: auto;
        }

            .box-pic-a .box-pic-item {
                margin-left: 0;
            }

        .banner-item {
        }
    </style>
</head>

<body style="padding:0px;margin:0px;">
    <div class="header">
        <div class="header-mid">
            <div class="header-mid-lft">
                <img src="/images/1loog.png" alt="" class="sitelogo title hide">
            </div>
            <div class="header-mid-rgt">
                <div class="phone-number" style="width:200px;margin-top:27px;color:gray;margin-right: 14px;font-family: SimHei,微软雅黑">服务热线：<span class="store-phone">400-600-9138</span></div>
                <!--<div class="header-input">
                    <input class="header-input_ip" type="text" name="" value="" placeholder="全站搜索">
                    <img src="/images/2.png" alt="" class="input-img">
                </div>-->
            </div>
        </div>
    </div>
    <!--导航-->
    <div class="navbar">

        <!--导航-->
        <div class="navbar-rel pc_index_nav">
            <div class="navbar-rel-item" style="margin-left:20px;" id="nav-1" onclick="location.href = '/pages/index.html'">
                <span>首页</span>
            </div>
        </div>
    </div>

    <div class="bannerground">
        <!--轮播图-->
        <div style="width:100%; margin-left:auto; margin-right:auto;">
            <div class="banner" id="b04" style="width:100%; margin:0px;">
                <ul class="index_banner" style="margin-top:0px;"></ul>
                <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="/images/index/arrowl.png" alt="prev" width="20" height="35"></a>
                <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="/images/index/arrowr.png" alt="next" width="20" height="35"></a>
            </div>
        </div>
    </div>

    <!--图片A区-->
    <div class="box-pic-a">
    </div>

    <div class="newgoods product-new-head hide">
        <img src="/images/7.png" class="newgoods-img">
    </div>
    <!--新品推荐-->
    <div class="product-new">
    </div>
    <div class="newgoods product-hot-head hide">
        <img src="/images/8.png" alt="" class="newgoods-img">
    </div>

    <!--热销推荐-->
    <div class="product-hot">
    </div>

    <div class="newgoods product-best-head hide">
        <img src="/images/9.png" class="newgoods-img">
    </div>

    <!--精品推荐-->
    <div class="product-best">
    </div>

    <!--内容列表-->
    <div class="news-list">
    </div>

    <!--图片B区-->
    <div class="showipc7 box-pic-b">
        <!--
        <div class="showipc7-lft">
            <img src="/images/24.png" alt="">
        </div>
        <div class="showipc7-rgt">
            <div class="showipc7-rgt-item">
                <img src="/images/26.png" alt="" class="showipc7-rgt-item-img" style="margin-bottom:15px;">
            </div>
            <div class="showipc7-rgt-item">
                <img src="/images/25.png" alt="" class="showipc7-rgt-item-img">
            </div>
        </div>
        -->
    </div>
    <div id="contact" class="contact-back">
        <script language="javascript">
            contact();
        </script>
    </div>

    <script>
        $(function () {
            var img = new Image();
            GetIndexBanner();	//banner
            getStoreInfo();     //店铺信息
            GetNavList();		//导航
            GetPicList(siteUrl.PictureWidgetList_A, "box-pic-a");	//图片组件A区
            getProduct();		//产品
            GetNewsList();		//内容组件
            GetPicList(siteUrl.PictureWidgetList_B, "box-pic-b");	//图片组件B区
            bindBtn();
        });
        function show() { var img = new Image(); };
        window.onload = show;
        var tom = function tom() { window.location.reload(); };

        //轮播banner
        function GetIndexBanner() {
            var img = new Image();
            AjaxGet(siteUrl.IndexBanner, "", function (data) {
                if (!checkCode(data)) {
                    Alert(data.Message);    //显示错误消息
                    return;
                }
                if (!emptyData(data)) {
                    $(".index_banner").html("<div class='event-item'><a href='javascript:'><img src='/images/3.png' class='photo' /></a></div>")
                    return; //显示空数据提示
                }
                if (data.Data.Config.length > 0) {
                    var html = "";
                    var list = data.Data.Config;
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        var linkType = item.LinkType;
                        var link = item.LinkValue;
                        var src = siteConfig.imgPath.widget.replace("{storeid}", storeInfo.storeId) + item.ShowImg;
                        img.src = src;
                        var imgheight =parseInt(img.height)-40;
                        if (img.height <= 0) {
                            img.onload = function () {
                                setInterval(tom(), 2000);
                            }
                        }
                        if (imgheight > 500) {
                            imgheight = 500;
                        }
                        if (linkType == "store_class") {
                            //店铺分类
                            url = siteUrl.htmlUrl.ProductList.replace("{storeid}", storeInfo.storeId).replace("{linkid}", link.Id);
                        }
                        else if (linkType == "product") {
                            //商品详情
                            url = siteUrl.htmlUrl.ProductDetail.replace("{storeid}", storeInfo.storeId).replace("{pid}", link.Id);
                        }
                        else if (linkType == "news_type") {
                            //内容列表
                            url = siteUrl.htmlUrl.NewsList.replace("{storeid}", storeInfo.storeId).replace("{linkid}", link.Id);
                        }
                        else if (linkType == "news") {
                            //内容详情
                            url = siteUrl.htmlUrl.NewsDetail.replace("{storeid}", storeInfo.storeId).replace("{newsid}", link.Id);
                        }
                        else if (linkType == "h5page")
                            url = link.Url;	//h5外链
                        html += "<li style='min-height:" + imgheight + ";background:url(" + src + ")no-repeat;background-size:100%100%;background-position: center 0px;width:100%;' class='banner-item' data-url='" + url + "'></li>";
                    }

                    $(".index_banner").html(html);
                }

                var unslider04 = $('.banner').unslider({ dots: true });
                var data04 = unslider04.data('unslider');
                $('.unslider-arrow04').click(function () {
                    var fn = this.className.split(' ')[1];
                    data04[fn]();
                });
                //轮播图点击事件
                $(".banner-item").click(function () {
                    window.location.href = $(this).attr("data-url");
                })
            });
        }

        //图片组件列表
        function GetPicList(url, className) {
            AjaxGet(url, "", function (data) {
                if (!checkCode(data)) {
                    Alert(data.Message);    //显示错误消息
                    return;
                }
                if (!emptyData(data)) {
                    return; //显示空数据提示
                }
                var html = "";
                var list = data.Data;
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (item.DisplayType == 11)
                        html += getBox_1(item);//单图
                    else if (item.DisplayType == 12)
                        html += getBox_2(item);			//双图
                    else if (item.DisplayType == 13)
                        html += getBox_3(item);			//三图
                    else if (item.DisplayType == 14)
                        html += getBox_4(item);			//四图
                    else if (item.DisplayType == 15)
                        html += getBox_5(item);			//五图
                }
                $("." + className).html(html);
            });
        }

        //获取新品、热销、精品推荐
        function getProduct() {
            AjaxGet(siteUrl.ProductWidgetList, "", function (data) {
                if (!checkCode(data)) {
                    Alert(data.Message);    //显示错误消息
                    return;
                }
                if (!emptyData(data))
                    return; //显示空数据提示

                var list = data.Data.Config;
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    var link = item.LinkValue;
                    if (link.Id == "new") {
                        //新品
                        if (item.DisplayProductInfos != null && item.DisplayProductInfos.length > 0) {
                            $(".product-new").html(getProductItem(item.DisplayProductInfos));
                            $(".product-new-head").removeClass("hide");
                        }
                    }
                    else if (link.Id == "hot") {
                        //热销
                        if (item.DisplayProductInfos != null && item.DisplayProductInfos.length > 0) {
                            $(".product-hot").html(getProductItem(item.DisplayProductInfos));
                            $(".product-hot-head").removeClass("hide");
                        }
                    }
                    else if (link.Id == "best") {
                        //精品
                        if (item.DisplayProductInfos != null && item.DisplayProductInfos.length > 0) {
                            $(".product-best").html(getProductItem(item.DisplayProductInfos));
                            $(".product-best-head").removeClass("hide");
                        }
                    }
                }
            });
        }

        //产品列表
        function getProductItem(list) {
            if (list == null) return "";

            var html = "<div class='showipc3'>";
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var src = "/images/def_pic4.png";
                if (item.ShowImg != null)
                    src = siteConfig.imgPath.product.replace("{storeid}", storeInfo.storeId) + item.ShowImg;
                var url = siteUrl.htmlUrl.ProductDetail.replace("{storeid}", storeInfo.storeId).replace("{pid}", item.Pid)
                html += "<div class='showipc3-item'>";
                html += "<a href='" + url + "' target='_blank'><div class='showipc3-item-tp' style='background: url(" + src + ") no-repeat;background-position: center 0px;background-size: cover;'></div></a>";
                html += "<div class='showipc3-item-mid'><a href='" + url + "' target='_blank'>" + item.Name + "</a></div>";
                html += "<div class='showipc3-item-btm'>¥ " + returnFloat(item.ShopPrice) + "</div>";
                html += "</div>";
            }
            html += "</div>";
            return html;
        }

        //内容列表
        function GetNewsList() {
            AjaxGet(siteUrl.NewsWidgetList, "", function (data) {
                if (!checkCode(data)) {
                    Alert(data.Message);    //显示错误消息
                    return;
                }
                if (!emptyData(data))
                    return; //显示空数据提示
                var html = "";
                var list = data.Data;
                console.log(list);
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (item.NewsList == null || item.NewsList.length == 0)
                        continue;

                    //典型案例图片
                    if (item.DisplayType == 1) {
                        var src1 = item.ShowImg == null ? "/images/20.png" : siteConfig.imgPath.widget.replace("{storeid}", storeInfo.storeId) + item.ShowImg;
                    }
                    if (item.DisplayType == 2) {
                        var src2 = item.ShowImg == null ? "/images/20.png" : siteConfig.imgPath.widget.replace("{storeid}", storeInfo.storeId) + item.ShowImg;
                    }
                    html += "<div class='example-title'>"
                    if (item.DisplayType == 1) {
                        html += "<a href='/pages/news_item.html?storeid=" + storeInfo.storeId + "&linktype=" + item.LinkType + "&newsid=" + item.NewsList[0].newsid + "'><div style='float:left;width:100%;text-align: center;'><img style='margin-top:15px;max-width:100%;max-height:100%;margin-bottom:15px;' class='example-title-img' src=" + src1 + "></div></a>"
                    } else if (item.DisplayType == 2) {
                        html += "<a href='/pages/news_item.html?storeid=" + storeInfo.storeId + "&linktype=" + item.LinkType + "&newsid=" + item.NewsList[0].newsid + "'><div style='float:left;width:100%;text-align: center;'><img style='margin-top:15px;max-width:100%;max-height:100%;margin-bottom:15px;' class='example-title-img' src=" + src2 + "></div></a>"
                    }
                    html += "</div>";
                    if (item.DisplayType == 1)
                        html += getNewsItem_1(item.NewsList);	//横排
                    else if (item.DisplayType == 2)
                        html += getNewsItem_2(item.NewsList);	//竖排
                }
                $(".news-list").html(html);
            })

        }

        function getNewsItem_1(list) {
            if (list == null) return "";
            var html = "<div  class='showipc5'>";
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var src = item.showimg == null ? "/images/def_pic1.png" : siteConfig.imgPath.news + item.showimg;
                var url = getTypeUrl("news", item.newsid, item.Url);
                html += "<div class='showipc5-item'><a href='" + url + "'><div class='news-pic' style='background: url(" + src + ") no-repeat;background-size: cover;height:235px;'></div></a><div class='news-title'>" + item.title + "</div></div>";
            }
            html += "</div>";
            return html;
        }

        function getNewsItem_2(list) {
            if (list == null) return "";
            var html = "<div class='showipc6'>";
            html += "<div class='showipc6-lft'>";
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                if (i >= 20) { break; }
                if (i % 2 == 0) {
                    var url = getTypeUrl("news", item.newsid, item.Url);
                    html += "<div class='showipc6-lft-item'>";
                    html += "<span class='showipc6-lft-item-icon' style='display:inline-block'>" + (i + 1) + "</span>";
                    html += "<span class='showipc6-lft-item-span'><a href='" + url + "'>" + item.title + "</span>";
                    html += " </div>";
                }
            }
            html += " </div>";
            if (list.length > 1) {
                html += "<div class='showipc6-rgt'>";
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (i % 2 != 0) {
                        if (i >= 19) break;
                        var url = getTypeUrl("news", item.newsid, item.Url);
                        html += "<div class='showipc6-lft-item'>";
                        html += "<span class='showipc6-lft-item-icon' style='display:inline-block'>" + (i + 1) + "</span>";
                        html += "<span class='showipc6-lft-item-span'><a href='" + url + "'>" + item.title + "</span>";
                        html += " </div>";
                    }
                }
                html += " </div>";
            }
            html += " </div>";
            return html;
        }

        function Alert(msg) {
            layer.msg(msg);
        }

        function getBox_1(item) {
            var link = eval(item.CustomerFeatures);
            if (link == null) {
                return "";
            } else if (link[0] == null || link[0] == "") {
                return "";
            } else { src = item.ShowImg == null ? "/images/def_1.png" : siteConfig.imgPath.widget.replace("{storeid}", storeInfo.storeId) + link[0].ShowImg; }
            var url = getTypeUrl(link[0].LinkType, link[0].Id, link[0].Url);	//图片链接
            var html = "<div class='box-pic-item'>"
            html += "<div class='showipc1'><a href='" + url + "'><img src='" + src + "' class='showipc1-img'></a></div>";
            html += "</div>";
            return html;
        }

        function getBox_2(item) {
            var imgList = eval(item.CustomerFeatures);
            if (imgList == null) return "";
            imgList = getSortArray(imgList);
            var html = "<div class='box-pic-item showipc2'>";
            for (var i = 0; i < imgList.length; i++) {
                var item = imgList[i];
                var src = item.ShowImg == null ? "/images/def_2.png" : siteConfig.imgPath.widget.replace("{storeid}", storeInfo.storeId) + item.ShowImg;
                var url = getTypeUrl(item.LinkType, item.Id, item.Url);	//图片链接
                html += "<div class='showipc2-lft'><a href='" + url + "'><img src='" + src + "' class='showipc2-img'></a></div>";
            }
            html += "</div>";
            return html;
        }

        //根据linktype类型，获取url
        function getTypeUrl(linkType, id, linkUrl) {
            var url = "";
            if (linkType == "store_class") {
                //店铺分类
                url = siteUrl.htmlUrl.ProductList.replace("{storeid}", storeInfo.storeId).replace("{linkid}", id);
            }
            else if (linkType == "product") {
                //商品详情
                url = siteUrl.htmlUrl.ProductDetail.replace("{storeid}", storeInfo.storeId).replace("{pid}", id);
            }
            else if (linkType == "news_type") {
                //内容列表
                url = siteUrl.htmlUrl.NewsList.replace("{storeid}", storeInfo.storeId).replace("{linkid}", id);
            }
            else if (linkType == "news") {
                //内容详情
                url = siteUrl.htmlUrl.NewsDetail.replace("{storeid}", storeInfo.storeId).replace("{newsid}", id);
            }
            else if (linkType == "h5page") {
                //h5外链
                url = linkUrl;
            }
            return url;
        }

        function getBox_3(item) {
            var imgList = eval(item.CustomerFeatures);
            if (imgList == null) return "";
            imgList = getSortArray(imgList);
            var html = "";
            html = "<div class='box-pic-item showipc2'>";
            html += "<div class='showipc2-lft'><a href='" + getLinkUrl(imgList[0]) + "'><img src='" + getSrc(imgList[0]) + "' class='showipc2-img' style='height:290px;'></a></div>";
            html += "<div class='showipc2-lft'>";
            html += "<a href='" + getLinkUrl(imgList[1]) + "'><img src='" + getSrc(imgList[1]) + "' class='showipc2-img' style='height:140px;'></a>";
            html += "<a href='" + getLinkUrl(imgList[2]) + "'><img src='" + getSrc(imgList[2]) + "' class='showipc2-img' style='height:140px; margin-top:10px'></a>";
            html += "</div>"
            html += "</div>";
            return html;
        }

        function getBox_4(item) {
            var imgList = eval(item.CustomerFeatures);
            if (imgList == null) return "";
            imgList = getSortArray(imgList);
            var html = "";
            html = "<div class='box-pic-item showipc2'>";
            html += "<div class='showipc2-lft'>";
            html += "<a href='" + getLinkUrl(imgList[0]) + "'><img src='" + getSrc(imgList[0]) + "' class='showipc2-img' style='height:140px;'></a>";
            html += "<a href='" + getLinkUrl(imgList[2]) + "'><img src='" + getSrc(imgList[2]) + "' class='showipc2-img' style='height:140px; margin-top:15px'></a>";
            html += "</div>"
            html += "<div class='showipc2-lft'>";
            html += "<a href='" + getLinkUrl(imgList[1]) + "'><img src='" + getSrc(imgList[1]) + "' class='showipc2-img' style='height:140px;'></a>";
            html += "<a href='" + getLinkUrl(imgList[3]) + "'><img src='" + getSrc(imgList[3]) + "' class='showipc2-img' style='height:140px; margin-top:15px'></a>";
            html += "</div>"
            html += "</div>";
            return html;
        }

        function getBox_5(item) {
            var imgList = eval(item.CustomerFeatures);
            if (imgList == null) return "";
            imgList = getSortArray(imgList);	//数组按照A\B\C\D\E排序
            var html = "";
            html = "<div class='box-pic-item showipc2'>";
            html += "<div style='width:320px; float:left;'>";
            html += "<div stlye='width:100%;height:100%;'>";
            html += "<a href='" + getLinkUrl(imgList[0]) + "'><img src='" + getSrc(imgList[0]) + "' class='showipc2-img' style='height:295px;'></a>";
            html += "</div>"
            html += "</div>"

            html += "<div style='width:320px; float:left;margin-left: 10px;'>";
            html += "<div class='box-img-5'>";
            html += "<a href='" + getLinkUrl(imgList[1]) + "'><img src='" + getSrc(imgList[1]) + "' class='showipc2-img' style='height:140px;'></a>";
            html += "</div>"

            html += "<div class='box-img-5'>";
            html += "<a href='" + getLinkUrl(imgList[2]) + "'><img src='" + getSrc(imgList[2]) + "' class='showipc2-img' style='height:140px;margin-top:10px;'></a>";
            html += "</div>"
            html += "</div>"

            html += "<div style='width:320px; float:left;margin-left: 10px;'>";
            html += "<div class='box-img-5'>";
            html += "<a href='" + getLinkUrl(imgList[3]) + "'><img src='" + getSrc(imgList[3]) + "' class='showipc2-img' style='height:140px;'></a>";
            html += "</div>"

            html += "<div class='box-img-5'>";
            html += "<a href='" + getLinkUrl(imgList[4]) + "'><img src='" + getSrc(imgList[4]) + "' class='showipc2-img' style='height:140px;margin-top:10px;'></a>";
            html += "</div>"
            html += "</div>"

            html += "</div>";
            return html;
        }

        function getSortArray(list) {
            var sortList = list;
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var linkArea = item.LinkArea.toUpperCase();
                if (linkArea == "A")
                    sortList[0] = item;
                if (linkArea == "B")
                    sortList[1] = item;
                if (linkArea == "C")
                    sortList[2] = item;
                if (linkArea == "D")
                    sortList[3] = item;
                if (linkArea == "E")
                    sortList[4] = item;
            }
            return sortList;
        }

        function getSrc(item) {
            if (item == null) return "";
            return item.ShowImg == null ? "/images/def_2.png" : siteConfig.imgPath.widget.replace("{storeid}", storeInfo.storeId) + item.ShowImg;
        }

        function bindBtn() {
            $('.navbar-rel-item').click(function (event) {
                $('.navbar-rel-item').css('background-color', '#ed7908');
                $('.navbar-rel div').removeClass("hot")
                $(this).addClass("hot")
            });
        }
    </script>
</body>
</html>